<template>
  <div class="add-api">

    <el-dialog :title="typeName" :visible.sync="dialogVisible" width="40%" :open="openDialog()">

      <el-form ref="casesForm" :model="casesForm" :rules="apiRules" label-width="80px">

        <el-form-item label="接口分组" required prop="groupId">
          <el-select v-model="casesForm.groupId" placeholder="请选择分组">
            <el-option v-for="item in groupList" :key="item.groupId" :label="item.name" :value="item.groupId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用例名" required prop="name">
          <el-input v-model="casesForm.name" placeholder="请输入内容"></el-input>
        </el-form-item>

        <el-form-item label="类型" required>
          <el-radio-group v-model="casesForm.tag">
            <el-radio label="冒烟">冒烟</el-radio>
            <el-radio label="回归">回归</el-radio>
            <el-radio label="功能">功能</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="优先级别" required>
          <el-radio-group v-model="casesForm.priority">
            <el-radio label="P1">P1</el-radio>
            <el-radio label="P2">P2</el-radio>
            <el-radio label="P3">P3</el-radio>
            <el-radio label="P4">P4</el-radio>
            <el-radio label="P5">P5</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="创建人" required>
          <el-select placeholder="请选择创建人" v-model="casesForm.userId">
            <el-option v-for="(item,index) in userList" :label="item.username" :value="item.userId" :key="index"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="用例描述">
          <el-input type="textarea" :rows="3" v-model="casesForm.message"></el-input>

        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrEditCase(casesForm)">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data () {
    return {

      dialogVisible: false,
      projectId: null,
      type: 'add',
      typeName: '添加用例',

      userList: [],
      groupList: [],

      casesForm: {
        method: '',
        groupId: null,
        name: '',
        path: '',
        protocol: 'https',

      },

      apiRules: {
        name: [
          { required: true, message: '请输入用例名', trigger: 'blur' },
          { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
        ],
        groupId: [
          { required: true, message: '请选择分组', trigger: 'blur' },
        ],
        method: [
          { required: true, message: '请输入路径', trigger: 'blur' },
        ],
      }


    }
  },

  methods: {

    openDialog () {
      this.projectId = this.$store.state.api.projectId


    },


    //获取用户信息
    getUser () {
      this.$http({
        url: this.$http.adornUrl('/sys/user/list'),
        method: 'get',
        params: {},
      }).then(({ data }) => {
        if (data.code == 0) {
          this.userList = data.page.list
        }
      })
    },

    //获取分组
    getGroup (projectId) {
      this.data = []
      this.$http({
        url: this.$http.adornUrl('/aitesting/group/listCaseByProjectId'),
        method: 'get',
        params: {
          projectId: projectId,
          groupType: 1,
        }
      }).then(({ data }) => {
        if (data.code == 0) {
          this.groupList = data.list
        } else {
          this.$message({
            message: data.msg,
            type: 'warning'
          });
        }
      })
    },


    //添加或编辑用例
    addOrEditCase (form) {
      let path = ''
      if (this.type == 'add') {
        path = '/aitesting/testCase/save'
      } else if (this.type == 'update') {
        path = '/aitesting/testCase/update'
      }
      form.projectId = this.projectId
      this.$http({
        url: this.$http.adornUrl(path),
        method: 'post',
        data: form,
      }).then(({ data }) => {
        if (data.code == 0) {
          this.$message({
            type: 'success',
            message: data.msg,
          });
          this.dialogVisible = false
          this.$emit("getCase", 'son')
        } else {
          this.$message({
            type: 'warning',
            message: data.msg,
          });
        }
      })
    },

  },

  created () {
    this.projectId = this.$store.state.api.projectId
    this.getGroup(this.projectId)
    this.getUser()
  },

  mounted () {

  }
}
</script>

<style scoped>
.add-api >>> .el-select {
  display: contents;
}
</style>